<template>
  <el-row id="Integral">
    <div class="Integral-top">
      <img src="../../assets/img/homeimg/home_icon_goods@2x (1).png" alt />
      <span>积分</span>
    </div>
    <div class="Integral-echarts">
      <div class="Integral-title">
        <span>联盟店走势</span>
        <div class="Integral-right">
          <div class="Integralthree">
            <el-radio-group v-model="radio" @change="labletwo">
              <el-radio :label="3">{{messageone}}</el-radio>
              <el-radio :label="6">{{messagetwo}}</el-radio>
            </el-radio-group>
          </div>
          <div class="Integralstring">
            <el-cascader
              :options="valueslist"
              :show-all-levels="false"
              size="mini"
              @change="handlechangeend"
            ></el-cascader>
          </div>
        </div>
      </div>

      <div class="Integral-item">
        <ul class="ullist">
          <li>
            <span style="background:rgb(221, 143, 141) "></span>
            <div>线上订单</div>
          </li>
          <li>
            <span style="background:rgb(47, 69, 84)"></span>
            <div>买单</div>
          </li>
          <li>
            <span style="background:rgb(97, 160, 168)"></span>
            <div>线上订单同比</div>
          </li>
          <li>
            <span style="background:rgb(212, 130, 101) "></span>
            <div>买单同比</div>
          </li>
        </ul>
      </div>
      <div class="Integral-list">
        <div id="Integralone" :style="{width:'1200px',height:'400px'}"></div>
      </div>
    </div>
  </el-row>
</template>

<script>
export default {
  name: "Integral",
  data() {
    return {
      valueslist: [
        {
          value: "sevenday",
          label: "近七天"
        },
        {
          value: "month",
          label: "近一个月"
        },
        {
          value: "threemonth",
          label: "90天"
        }
      ],
      radio: 3,
      messageone: "收入",
      messagetwo: "支出",
      Integralone: "",
      timeType: 1,
      income: true,
      expenditure: false,
      name: "",
      listname: "",
      listtime: "",
      listtime: "",
      series3: [
        {
          name: "",
          type: "line",
          stack: "总量",
          data: []
          // data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
          name: "", //name
          type: "line",
          stack: "总量",
          data: [] //inname  big[0]
          // data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
          name: "",
          type: "line",
          stack: "总量",
          data: []
          // data: [150, 232, 201, 154, 190, 330, 410]
        },
        {
          name: "",
          type: "line",
          stack: "总量",
          data: []
          // data: [320, 332, 301, 334, 390, 330, 320]
        }
      ]
    };
  },
  created() {
    // 页面创建生命周期函数
    // this.initWebSocket();
    this.handlechangeend(0);
    this.iften();
    this.redio();
    this.getSecode();
    this.labletwo();
  },
  mounted() {
    this.handlechangeend();
    // if ("WebSocket" in window) {
    //   this.websocket = new WebSocket(
    //     "ws://localhost:8801/myproject/websocket/" + this.userName
    //   );
    //   this.initWebSocket();
    // } else {
    //   alert("当前浏览器 Not support websocket");
    // }
    // this.getSecode();
    this.labletwo();
    this.handlechangeend();
  },
  // beforeDestroy() {
  //   this.onbeforeunload();
  // },
  activated() {
    this.getSecode();
  },
  destroyed: function() {
    // 离开页面生命周期函数
    // this.websocketclose();
  },
  methods: {
    redio(value) {
      var _that = this;
      var index;
      if (value == 3) {
        _that.income = true;
        _that.expenditure = false;
      }
      if (value == 6) {
        _that.income = false;
        _that.expenditure = true;
      }
    },
    iften(value) {
      var index;
      var _that = this;
      if (value == "sevenday") {
        _that.timeType = 1;
      }
      if (value == "month") {
        _that.timeType = 2;
      }
      if (value == "threemonth") {
        _that.timeType = 3;
      }
    },
    labletwo(value) {
      this.redio(value);
      this.iften(value);
      var _that = this;
      this.$http({
        url: this.$http.adornUrl("/home/queryBusinessIntegral"),
        method: "get",
        params: this.$http.adornParams({
          timeType: _that.timeType,
          income: _that.income,
          expenditure: _that.expenditure
        })
      })
        .then(({ data }) => {
          var listingtime = [];
          var listingname = [];
          var listingitem = [];
          listingtime = data.data.time; //time
          data.data.list[0].map(item => {
            //name
            listingname.push(item.name);
          });
          //listingitem
          var listingbigone = []; //所有的income
          var type01 = [];
          var type02 = [];
          var type03 = [];
          var type04 = [];

          var listingbigtwo = []; //线上所有的expenditure
          var type05 = [];
          var type06 = [];
          var type07 = [];
          var type08 = [];

          data.data.list[0].map((item, index) => {
            //操做income
            // type01.push(item[0].income);
            // type02.push(item[0].income);
            // type03.push(item[0].income);
            // type04.push(item[0].income);
            type01.push(item.income);
            type02.push(item.income);
            type03.push(item.income);
            type04.push(item.income);
          });
          listingbigone[0] = type01;
          listingbigone[1] = type02;
          listingbigone[2] = type03;
          listingbigone[3] = type04;

          //listingbigone   所有的income 的集合处理
          this.series3[0].data = listingbigone[0];
          this.series3[1].data = listingbigone[1];
          this.series3[2].data = listingbigone[2];
          this.series3[3].data = listingbigone[3];

          //操作expenditure
          data.data.list[0].map((item, index) => {
            //操作expenditure
            // type05.push(item[0].expenditure);
            // type06.push(item[0].expenditure);
            // type07.push(item[0].expenditure);
            // type08.push(item[0].expenditure);
            type05.push(item.expenditure);
            type06.push(item.expenditure);
            type07.push(item.expenditure);
            type08.push(item.expenditure);
          });

          listingbigtwo[0] = type05;
          listingbigtwo[1] = type06;
          listingbigtwo[2] = type07;
          listingbigtwo[3] = type08;

          //listingbigtwo 所有的线上所有的expenditure 的集合处理
          this.series3[0].data = listingbigtwo[0];
          this.series3[1].data = listingbigtwo[1];
          this.series3[2].data = listingbigtwo[2];
          this.series3[3].data = listingbigtwo[3];

          this.series3.map((item, index) => {
            item.name = listingname[index];
          });

          if (data && data.code === 0) {
            this.Integralone.setOption({
              legend: {
                // data: listname
                data: listingname
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                // data: listtime
                data: listingtime
              },
              series: this.series3
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handlechangeend(value) {
      var _that = this;
      this.iften(value);
      this.$http({
        url: this.$http.adornUrl("/home/queryBusinessIntegral"),
        method: "get",
        params: this.$http.adornParams({
          timeType: _that.timeType,
          income: _that.income,
          expenditure: _that.expenditure
        })
      })
        .then(({ data }) => {
          var listname = [];
          var listtime = [];
          var listitem = []
          listtime = data.data.time; //底部时间
          data.data.list[0].map(item => {
            listname.push(item.name);
          });
          // listitem\
          var big = [];
          var type1 = []; //线上订单呢的所哟有income
          var type2 = [];
          var type3 = [];
          var type4 = [];
          data.data.list.map((item, idx) => {
            type1.push(item[0].income);
            type2.push(item[0].income);
            type3.push(item[0].income);
            type4.push(item[0].income);
          });
          big[0] = type1;
          big[1] = type2;
          big[2] = type3;
          big[3] = type4;
          // this.series3[0].data = listitem;
          this.series3.map((item, idx) => {
            item.name = listname[idx];
            // item.data = listitem
          });
          this.series3[0].data = big[0];
          this.series3[1].data = big[1];
          this.series3[2].data = big[2];
          this.series3[3].data = big[3];
          if (data && data.code === 0) {
            // console.log(data);
            this.Integralone.setOption({
              legend: {
                data: listname
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: listtime
              },
              series: this.series3
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    getSecode() {
      this.series3[0].data = [];
      this.Integralone = this.$echarts.init(
        document.getElementById("Integralone")
      );
      //绘制图表
      this.Integralone.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [] //name
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: []
          // data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] time
        },
        yAxis: {
          type: "value"
        },
        series: this.series3
      });
    }

    // initWebSocket: function() {
    //   // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
    //   // debugger;
    //   // this.websock = new WebSocket(`ws://localhost:8080/websocket/DPS007`)
    //   this.websock.onopen = this.websocketonopen;
    //   this.websock.onerror = this.websocketonerror;
    //   this.websock.onmessage = this.websocketonmessage;
    //   this.websock.onclose = this.websocketclose;
    //   window.onbeforeunload = this.onbeforeunload;
    // },
    // websocketonopen: function() {
    //   console.log("WebSocket连接成功");
    // },
    // websocketonerror: function(e) {
    //   console.log("WebSocket连接发生错误");
    // },
    // websocketonmessage: function(e) {
    //   var da = JSON.parse(e.data);
    //   console.log(da);
    //   this.message = da;
    // },
    // websocketclose: function(e) {
    //   console.log("connection closed (" + e.code + ")");
    // }
  }
};
</script>
<style scoped>
#Integral {
  width: 100%;
  height: 539px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  margin-top: 24px;
}
.Integral-top {
  width: 100%px;
  height: 48px;
  line-height: 48px;
  background: rgba(242, 242, 242, 1);
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  padding-left: 20px;
}
.Integral-top > img {
  width: 16px;
  height: 16px;
}
.Integral-top > span {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 32px;
  margin-left: 5px;
}
.Integral-echarts {
  width: 100%;
  height: 491px;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(204, 204, 204, 1);
  border-left: 1px solid rgba(255, 255, 255, 1);
  border-top: 1px solid rgba(255, 255, 255, 1);
  border-right: 1px solid rgba(255, 255, 255, 1);
}
.Integral-title {
  width: 1433px;
  height: 32px;
  /* background: wheat; */
  margin-left: 93px;
  margin-top: 40px;
  line-height: 40px;
}
.Integral-title > span {
  float: left;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 34px;
}
.Integral-right {
  width: 400px;
  height: 32px;
  float: right;
  /* background: gray; */
}
.Integralthree {
  width: 220px;
  height: 32px;
  float: left;
}
.Integralstring {
  float: left;
}
.Integral-list {
  width: 1200px;
}
.Integral-item {
  width: 260px;
  height: 350px;
  /* background: wheat; */
  float: right;
  margin-top: 66px;
}
ul,
ol {
  list-style: none;
}
.ullist {
  width: 100%;
}
.ullist > li {
  width: 100%;
  height: 30px;
  line-height: 16px;
}
.ullist > li > span {
  width: 16px;
  height: 16px;
  background: gray;
  float: left;
}
.ullist > li > div {
  text-align: left;
  margin-left: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
}
</style>